<script setup lang="tsx">
import { preApi } from '@/api/financial'
const props = defineProps({
  id: {
    type: Number || String,
    default: 0
  },
  billItems: {
    type: Array || null,
    default: null
  },
  feeItems: {
    type: Array || null,
    default: null
  }
})

const detail = ref<any>({})

const getDetail = async () => {
  const res = await preApi({ checkBillId: props.id })
  detail.value = res.data
  if (props.billItems) {
    detail.value.billItems = props.billItems.filter((item: any) => {
      return item.itemDesc || item.itemAmt
    })
  }
  if (props.feeItems) {
    detail.value.feeItems = props.feeItems.filter((item: any) => {
      return item.itemDesc || item.itemAmt
    })
  }
}
getDetail()
</script>

<template>
  <table>
    <thead>
      <tr>
        <th colspan="4">{{ detail.title }}</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>甲方</td>
        <td>{{ detail.partA }}</td>
        <td>乙方</td>
        <td>{{ detail.partB }}</td>
      </tr>
      <tr>
        <td>服务项目</td>
        <td colspan="3">{{ detail.serviceItemDesc }}</td>
      </tr>
      <tr>
        <td>合作模式</td>
        <td colspan="3">{{ detail.collaborateModeText }}</td>
      </tr>
      <tr>
        <td>结算金额</td>
        <td colspan="3">￥{{ detail.withdrawalAmt }}</td>
      </tr>
      <template v-if="detail.checkType === 2">
        <tr>
          <td :rowspan="detail?.billItems?.length + 1">结算周期及金额</td>
        </tr>
        <tr v-for="(item, index) in detail.billItems" :key="index">
          <td>{{ item.itemDesc }}</td>
          <td colspan="2">{{ item.itemAmt }}</td>
        </tr>
      </template>
      <tr>
        <td :rowspan="detail?.feeItems?.length + 1">核算扣费</td>
      </tr>
      <tr v-for="(item, index) in detail.feeItems" :key="index">
        <td>{{ item.itemDesc }}</td>
        <td colspan="2">{{ item.itemAmt }}</td>
      </tr>
      <tr>
        <td>合计(元)</td>
        <td colspan="3">￥{{ detail.finalAmt }}</td>
      </tr>
      <tr>
        <td rowspan="7">开票信息</td>
        <td>公司名称</td>
        <td colspan="2">{{ detail.invoiceCompany }}</td>
      </tr>
      <tr>
        <td>纳税人识别号</td>
        <td colspan="2">{{ detail.taxpayerIdNo }}</td>
      </tr>
      <tr>
        <td>开户行</td>
        <td colspan="2">{{ detail.bankName }}</td>
      </tr>
      <tr>
        <td>银行账号</td>
        <td colspan="2">{{ detail.bankCardNo }}</td>
      </tr>
      <tr>
        <td>公司地址</td>
        <td colspan="2">{{ detail.companyAddress }}</td>
      </tr>
      <tr>
        <td>电话</td>
        <td colspan="2">{{ detail.mobile }}</td>
      </tr>
      <tr>
        <td>开票内容</td>
        <td colspan="2">{{ detail.invoiceAmt }}</td>
      </tr>
    </tbody>
  </table>
</template>
<style scoped lang="less">
table {
  width: 100%;
  padding: 0;
  border-collapse: collapse;
}

td,
th {
  padding: 10px;
  border: 1px solid #999;
  border-spacing: 0;
}
</style>
